<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>知识仓库 - 渐进学习平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* ===== 基础样式重置 ===== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    }

    /* ===== CSS 变量定义 ===== */
    :root {
      --primary-color: #4a6bff;
      --primary-light: #eef2ff;
      --secondary-color: #ff6b6b;
      --accent-color: #00d2d3;
      --success-color: #10b981;
      --warning-color: #f59e0b;
      --danger-color: #ef4444;
      --text-primary: #1f2937;
      --text-secondary: #6b7280;
      --text-light: #9ca3af;
      --background-light: #f9fafb;
      --white: #ffffff;
      --border-color: #e5e7eb;
      --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1);
      --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.07);
      --shadow-heavy: 0 10px 15px rgba(0, 0, 0, 0.1);
      --border-radius: 12px;
      --transition: all 0.3s ease;
    }

    body {
      background-color: var(--background-light);
      color: var(--text-primary);
      line-height: 1.6;
      min-height: 100vh;
    }

    /* ===== 导航栏样式 ===== */
    .navbar {
      background: var(--white);
      box-shadow: var(--shadow-light);
      padding: 15px 0;
      z-index: 100;
      position: sticky;
      top: 0;
    }

    .navbar .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-weight: 700;
      color: var(--primary-color);
    }

    .nav-brand i {
      margin-right: 10px;
      font-size: 26px;
    }

    .nav-buttons {
      display: flex;
      gap: 15px;
    }

    /* ===== 按钮样式 ===== */
    .btn {
      padding: 10px 20px;
      border-radius: var(--border-radius);
      text-decoration: none;
      font-weight: 600;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      border: none;
      font-size: 14px;
    }

    .btn-outline {
      border: 2px solid var(--primary-color);
      color: var(--primary-color);
      background: transparent;
    }

    .btn-primary {
      background: var(--primary-color);
      color: var(--white);
      box-shadow: var(--shadow-light);
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    .btn-outline:hover {
      background: var(--primary-color);
      color: var(--white);
    }

    /* ===== 主布局 ===== */
    .main-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    /* ===== 页面标题区域 ===== */
    .page-header {
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .page-title {
      font-size: 32px;
      color: var(--text-primary);
      margin-bottom: 10px;
      font-weight: 700;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }

    .breadcrumb-item {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--text-secondary);
      font-size: 14px;
      cursor: pointer;
    }

    .breadcrumb-item:not(:last-child):after {
      content: "›";
      margin-left: 10px;
    }

    .breadcrumb-item.active {
      color: var(--primary-color);
      font-weight: 600;
    }

    /* ===== 卡片网格布局 ===== */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      margin-bottom: 40px;
    }

    .card {
      background: var(--white);
      border-radius: var(--border-radius);
      overflow: hidden;
      box-shadow: var(--shadow-light);
      border: 1px solid var(--border-color);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-heavy);
    }

    .card-image {
      height: 160px;
      background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      font-size: 40px;
    }

    .card-content {
      padding: 20px;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
    }

    .card-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 10px;
      line-height: 1.3;
    }

    .card-description {
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: 15px;
      font-size: 14px;
      flex-grow: 1;
    }

    .card-meta {
      display: flex;
      justify-content: space-between;
      margin-top: auto;
      font-size: 14px;
      color: var(--text-secondary);
    }

    .card-count {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid var(--border-color);
    }

    .progress-container {
      flex-grow: 1;
      margin-right: 15px;
    }

    .progress-bar {
      height: 6px;
      background: var(--border-color);
      border-radius: 3px;
      overflow: hidden;
      margin-bottom: 5px;
    }

    .progress-fill {
      height: 100%;
      background: var(--success-color);
      border-radius: 3px;
      transition: width 0.5s ease;
    }

    .progress-text {
      font-size: 12px;
      color: var(--text-light);
    }

    .card-btn {
      padding: 8px 15px;
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-weight: 600;
      transition: var(--transition);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
    }

    .card-btn:hover {
      background: #3a56e6;
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }

    /* ===== 分页样式 ===== */
    .pagination-container {
      margin: 40px 0 20px;
      text-align: center;
    }

    .page-info {
      margin-bottom: 15px;
      color: var(--text-secondary);
      font-size: 14px;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }

    .page-link {
      padding: 10px 15px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      text-decoration: none;
      color: var(--text-primary);
      transition: var(--transition);
      font-size: 14px;
      min-width: 40px;
      text-align: center;
      display: inline-block;
      cursor: pointer;
    }

    .page-link:hover {
      background: var(--primary-color);
      color: var(--white);
      border-color: var(--primary-color);
    }

    .page-link.active {
      background: var(--primary-color);
      color: var(--white);
      border-color: var(--primary-color);
    }

    .page-link.disabled {
      color: var(--text-light);
      cursor: not-allowed;
      background: var(--background-light);
    }

    .page-ellipsis {
      padding: 10px 5px;
      color: var(--text-light);
    }

    .page-jump {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 15px;
      flex-wrap: wrap;
    }

    .page-input {
      width: 60px;
      padding: 8px 10px;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      text-align: center;
    }

    .jump-btn {
      padding: 8px 15px;
      background: var(--primary-color);
      color: var(--white);
      border: none;
      border-radius: var(--border-radius);
      cursor: pointer;
      font-size: 14px;
      transition: var(--transition);
    }

    .jump-btn:hover {
      background: #3a56e6;
    }

    /* ===== 页脚样式 ===== */
    footer {
      text-align: center;
      color: var(--text-secondary);
      padding: 30px 0;
      margin-top: 40px;
      border-top: 1px solid var(--border-color);
      background: var(--white);
    }

    footer p {
      margin-bottom: 15px;
    }

    /* ===== 加载动画 ===== */
    .loading-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 40px;
      grid-column: 1 / -1;
    }

    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 4px solid var(--primary-light);
      border-top: 4px solid var(--primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* ===== 空状态 ===== */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-light);
      grid-column: 1 / -1;
    }

    .empty-state i {
      font-size: 48px;
      margin-bottom: 20px;
    }

    .empty-state h3 {
      color: var(--text-secondary);
      margin-bottom: 10px;
    }

    /* ===== 响应式设计 ===== */
    @media (max-width: 768px) {
      .nav-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
      }

      .navbar .container {
        flex-direction: column;
        gap: 15px;
      }

      .cards-grid {
        grid-template-columns: 1fr;
      }

      .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }

      .pagination {
        gap: 3px;
      }

      .page-link {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 35px;
      }
    }

    @media (max-width: 480px) {
      .main-container {
        padding: 15px;
      }

      .page-title {
        font-size: 28px;
      }

      .card-image {
        height: 120px;
        font-size: 32px;
      }
    }

    /* ===== 难度徽章样式 ===== */
    .difficulty-badge {
      display: inline-block;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: bold;
    }
    .difficulty-beginner {
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
    }
    .difficulty-intermediate {
      background: rgba(245, 158, 11, 0.1);
      color: #f59e0b;
    }
    .difficulty-advanced {
      background: rgba(239, 68, 68, 0.1);
      color: #ef4444;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
  <div class="container">
    <div class="nav-brand">
      <i class="fas fa-graduation-cap"></i> 渐进学习平台
    </div>
    <div class="nav-buttons">
      <span style="margin-right: 15px; color: var(--primary-color);">
        欢迎，<span id="username">学习者</span>
      </span>
      <a href="/" class="btn btn-outline">返回首页</a>
      <a href="#" class="btn btn-outline">退出</a>
    </div>
  </div>
</nav>

<!-- 主布局 -->
<div class="main-container">
  <!-- 页面标题区域 -->
  <div class="page-header">
    <div>
      <h1 class="page-title" id="pageTitle" th:text="${currentClassId != null || currentModuleId != null || currentPackageId != null} ?
          (${currentPackageId != null} ? '知识点' : (${currentModuleId != null} ? '知识包' : (${currentClassId != null} ? '模块' : '知识分类'))) : '知识分类'">
        知识分类
      </h1>
      <div class="breadcrumb" id="breadcrumb">
        <!-- 动态面包屑将通过JavaScript生成 -->
      </div>
    </div>
    <div id="backButtonContainer"></div>
  </div>

  <!-- 分类筛选区域 -->
  <div class="filter-section" style="margin-bottom: 20px; display: flex; gap: 15px; flex-wrap: wrap;">
    <select id="classFilter" class="filter-select" onchange="onClassFilterChange(this.value)">
      <option value="">所有分类</option>
      <option th:each="class : ${knowledgeClasses}"
              th:value="${class.id}"
              th:text="${class.name}"
              th:selected="${currentClassId == class.id}">
      </option>
    </select>

    <select id="moduleFilter" class="filter-select" onchange="onModuleFilterChange(this.value)">
      <option value="">所有模块</option>
      <option th:each="module : ${modules}"
              th:value="${module.id}"
              th:text="${module.name}"
              th:selected="${currentModuleId == module.id}">
      </option>
    </select>
  </div>

  <!-- 卡片网格容器 -->
  <div class="cards-grid" id="cardsContainer">
    <!-- 使用Thymeleaf直接渲染知识包数据 -->
    <div th:each="pkg : ${knowledgePackages}" class="card">
      <div class="card-image" style="background: linear-gradient(135deg, #00d2d3, #4ecdc4);">
        <i class="fas fa-box-open"></i>
      </div>
      <div class="card-content">
        <h3 class="card-title" th:text="${pkg.name}">知识包标题</h3>
        <p class="card-description" th:text="${pkg.description}">描述</p>
        <div class="card-meta">
          <div class="card-count">
            <i class="fas fa-book"></i>
            <span th:text="${pkg.pointCount} + ' 个知识点'">0 个知识点</span>
          </div>
          <div class="card-count">
            <i class="far fa-clock"></i>
            <span th:text="${pkg.totalDuration} + ' 分钟'">0 分钟</span>
          </div>
        </div>
        <div class="card-footer">
          <div class="progress-container">
            <div class="progress-bar">
              <div class="progress-fill" th:style="'width: ' + ${pkg.progress} + '%;'"></div>
            </div>
            <div class="progress-text" th:text="'已学习 ' + ${pkg.progress} + '%'">已学习 0%</div>
          </div>
          <button class="card-btn" th:onclick="'loadPoints(' + ${pkg.id} + ')'">
            <i class="fas fa-arrow-right"></i> 查看知识点
          </button>
        </div>
      </div>
    </div>

    <!-- 如果没有数据，显示空状态 -->
    <div th:if="${#lists.isEmpty(knowledgePackages)}" class="empty-state">
      <i class="fas fa-inbox"></i>
      <h3>暂无数据</h3>
      <p>当前分类下没有找到相关内容</p>
    </div>
  </div>

  <!-- 分页导航 -->
  <div class="pagination-container" th:if="${totalPages > 1}">
    <div class="page-info">
      共 <span th:text="${totalItems}">0</span> 个知识包，第 <span th:text="${currentPage}">1</span> 页，共 <span th:text="${totalPages}">1</span> 页
    </div>
    <div class="pagination">
      <!-- 上一页 -->
      <a th:if="${currentPage > 1}"
         class="page-link"
         th:href="@{/knowledge/gym(classId=${currentClassId}, moduleId=${currentModuleId}, packageId=${currentPackageId}, page=${currentPage - 1}, size=${pageSize})}">
        ‹ 上一页
      </a>
      <a th:unless="${currentPage > 1}" class="page-link disabled">‹ 上一页</a>

      <!-- 页码 -->
      <a th:each="page : ${#numbers.sequence(1, totalPages)}"
         class="page-link"
         th:classappend="${page == currentPage} ? 'active' : ''"
         th:href="@{/knowledge/gym(classId=${currentClassId}, moduleId=${currentModuleId}, packageId=${currentPackageId}, page=${page}, size=${pageSize})}"
         th:text="${page}">
      </a>

      <!-- 下一页 -->
      <a th:if="${currentPage < totalPages}"
         class="page-link"
         th:href="@{/knowledge/gym(classId=${currentClassId}, moduleId=${currentModuleId}, packageId=${currentPackageId}, page=${currentPage + 1}, size=${pageSize})}">
        下一页 ›
      </a>
      <a th:unless="${currentPage < totalPages}" class="page-link disabled">下一页 ›</a>
    </div>
  </div>
</div>


<!-- 页脚 -->
<footer>
  <p>&copy; 2024 渐进学习平台 - 让学习像健身一样科学有效</p>
  <p>联系我们: support@knowledge-gym.com</p>
</footer>

<script>
  // 简化的JavaScript，只处理交互逻辑
  document.addEventListener('DOMContentLoaded', function() {
    updateBreadcrumb();
  });

  function updateBreadcrumb() {
    const breadcrumb = document.getElementById('breadcrumb');
    let html = '<div class="breadcrumb-item active">知识分类</div>';

    // 这里可以根据URL参数动态生成面包屑，但为了简单起见，暂时固定
    breadcrumb.innerHTML = html;
  }

  function onClassFilterChange(classId) {
    const url = new URL(window.location);
    if (classId) {
      url.searchParams.set('classId', classId);
    } else {
      url.searchParams.delete('classId');
    }
    // 清除模块筛选
    url.searchParams.delete('moduleId');
    url.searchParams.delete('packageId');
    url.searchParams.set('page', '1');
    window.location.href = url.toString();
  }

  function onModuleFilterChange(moduleId) {
    const url = new URL(window.location);
    if (moduleId) {
      url.searchParams.set('moduleId', moduleId);
    } else {
      url.searchParams.delete('moduleId');
    }
    // 清除知识包筛选
    url.searchParams.delete('packageId');
    url.searchParams.set('page', '1');
    window.location.href = url.toString();
  }

  function loadPoints(packageId) {
    const url = new URL(window.location);
    url.searchParams.set('packageId', packageId);
    url.searchParams.set('page', '1');
    window.location.href = url.toString();
  }

  function startTraining(pointId) {
    window.location.href = `/knowledge/training/start/${pointId}`;
  }
</script>
</body>
</html>